<template>
  <div class="microQueryResult">
    <div class="header" @click="closeQueryResult">
      <i class="el-icon-arrow-left"></i>
      <p>&nbsp;&nbsp;&nbsp;基层查询结果</p>
    </div>
    <div class="content">
      <div class="btn-box">
        <el-button
          v-for="(item,index) in microSearchParams"
          :key="index"
          :class="item.sort==selectedSearchParams.sort?'QueryResult active':'QueryResult'"
        >
          <i class="el-icon-circle-close" @click="deleteResultParams(item,index)"></i>
          <p  @click="changeSearch(item)">{{item.title}}</p>
        </el-button>
      </div>
      <div class="list searchresult-box">
        <ul>
          <li
            v-for="(item,index) in searchresult.searchresultlistData"
            :key="index"
            :class="searchresult.activeitem==index?'active':''"
          >
            <p
              @click="searchresultrowhander(item,index,'click')"
              @mouseover="searchresultrowhander(item,index,'hover')"
              @mouseleave="searchresultrowhander(item,index,'leave')"
              :title="(item[searchresult.searchlistshowcode]).value"
            >
              <i class="el-icon-location-outline"></i>
              {{(item[searchresult.searchlistshowcode]).value}}
            </p>
          </li>
        </ul>
        <div class="block pagination-box">
          <el-pagination
            :small="true"
            @current-change="tableCurrentChange"
            :current-page.sync="pagination.pagenum"
            :page-size="pagination.pagesize"
            :pager-count="5"
            layout="prev, pager, next, jumper,total"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </div>

      <div class="hander-box">
        <div v-if="microPower.includes('micro/collect')" @click="openFastCollectLayer">
          <img src="../../images/count.png" alt />
          <p>快速汇总</p>
        </div>
        <div v-if="microPower.includes('micro/collect')" @click="openTableLayer">
          <img src="../../images/showtable.png" alt />
          <p>浏览表格</p>
        </div>
        <!-- <div v-if="microPower.includes('micro/collect')" @click="resultSave=true">
          <img src="../../images/save.png" alt />
          <p>成果保存</p>
        </div> -->
        <div @click="clearSearch" v-if="microPower.includes('micro/collect')">
          <img src="../../images/clear.png" alt />
          <p>清除结果</p>
        </div>
      </div>
    </div>

    <typetab v-if="showTypeTabLayer" :typetabstyle="typetabstyle"></typetab>

    <fastcollect
      v-if="showFastCollectLayer"
      :selectedSearchParams="selectedSearchParams"
      @update_typetabstyle="update_typetabstyle"
    ></fastcollect>

    <tableLayer
    v-if="showTableLayer"
    :selectedSearchParams="selectedSearchParams"
    >
    </tableLayer>
    
    <el-dialog 
      title="成果保存"
      :visible.sync="resultSave"
      :modal="false"
      :center="true"
      :close-on-click-modal="true"
      custom-class="dialogSaveTerm"
      width="500px"
    >
      <el-form :model="saveResultform" ref="saveResultValidateForm" label-width="55px" size="small">
        <el-form-item 
        label="标题" 
        prop="title"
        :rules="[
          { required: true, message: '标题不能为空'}
        ]">
          <el-input type="title" v-model="saveResultform.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述"  prop="memo">
          <el-input v-model="saveResultform.memo" type="memo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  class="submit" size="small" type="primary" @click="saveterm('saveResultValidateForm')">确 定</el-button>
        <el-button class="cancel" size="small" @click="closeSaveDialog('saveResultValidateForm') ">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import macroquerypanel from "./macroquerypanel.vue"; //综合查询条件组装面板
import typetab from "./typetab.vue"; //地图/表格/统计图切换控制组件
import fastcollect from "./collect/collect.vue"; //快速汇总面板
import tableLayer from "../table/table.vue"; //快速汇总面板

import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import Layer from "@/utils/map/lib/main.js"; // 专题图层绘画函数
import searchresultData from "./searchresult.data.js";
import axios from "axios";
import authority from "static/js/authority.js";
// import { setTimeout } from "timers";

import * as microAPI from "@/pages/micro/api/micro.js";
import microConfig from "static/config/micro.js";

export default {
  name: "microSearchResultPanel",
  props: {
    microsearchargs: {
      // 分页面信息 records 总为数; page 页数; pageSize 一页显示条目数;
      type: Object,
      default: function() {
        return {};
      }
    },
    hasaddterm: {
      type: Object,
      default: function() {
        return {};
      }
    },
    selectedId:{
      type: String,
      default: "",
    }
  },
  components: {
    macroquerypanel,
    fastcollect,
    typetab,
    tableLayer
  },

  data() {
    return {
      hasaddResult:{},
      mitmid:'',
      saveResultform: {
        //成果保存字段
        title: "",
        memo: ""
      },
      resultSave:false,//成果保存弹窗
      microPower: [], //基层权限
      Authorization: "", //token
      microSearchParams: [], //存储基层查询参数
      selectedSearchParams: {}, //当前选中项查询参数
      searchresult: {
        //查询结果表格相关
        searchresultlistData: [
          //查询结果数据
        ],
        searchlistshowcode:microConfig.searchlistshowcode.iden_code,//数据结果显示列（指标）
        activeitem: -1 //高亮指标
      },
      //分页相关-条件查询
      pagination: {
        pagesize: microConfig.table.pagesize, //每页大小
        total: 0, //总数
        pagenum: 1 //当前页
      },
      sort: 0, //查询结果个数
      typetabstyle: {
        //地图、图表、表格切换组件样式
        width: "calc(100vw - 301px)",
        left: "301px",
        activeName: "tongjitu"
      },
      playTime:null
    };
  },
  watch: {
    hasaddterm(val){
      this.hasaddResult = val
    },
    microsearchargs(newargs) {
      this.initArgs(newargs);
    },
    showQueryTableLayer(newVal){
      if(newVal){
        this.typetabstyle.width = '100vw';
        this.typetabstyle.left = '0';
      }else{
        this.typetabstyle.width = 'calc(100vw - 301px)';
        this.typetabstyle.left = '301px';
      }
    },
    selectedId(val){
      this.mitmid = val
    }
  },
  computed: {
    ...mapState({
      showmacroqueryall: state => state.micro.showmacroqueryall,
      showFastCollectLayer: state => state.micro.showFastCollectLayer,
      showTypeTabLayer: state => state.micro.showTypeTabLayer,
      showTableLayer: state => state.micro.showTableLayer,
      showMicroQueryResult: state => state.micro.showMicroQueryResult,
      showQueryTableLayer: state => state.micro.showQueryTableLayer,
      showEchartsLayer: state => state.micro.showEchartsLayer,
      showMapTableLayer: state => state.micro.showMapTableLayer,
      isSearchData: state => state.micro.isSearchData,
      enlargeTable: state => state.micro.enlargeTable,
      enlargeChart: state => state.micro.enlargeChart,
      showMapControl: state => state.micro.showMapControl,
    })
  },
  mounted() {
    let that = this;
    //获取权限方法
    that.hasaddResult = that.hasaddterm
    that.mitmid = that.selectedId
    var userInfo = localStorage.getExpire("userInfo");
    var token_type = localStorage.getExpire("token_type");
    var access_token = localStorage.getExpire("access_token");

    if (userInfo && token_type && access_token) {
      that.Authorization = token_type + " " + access_token;
      that.microPower = JSON.parse(userInfo).permissions;
    }
    EventBus.$on("highLightResLi", this.highLightResLi);
    EventBus.$on("updateRegions", this.updateRegions);
    EventBus.$on("clearSearchResult", this.clearSearch);
    EventBus.$on("updateMicroSearchParams", this.updateMicroSearchParams);
  },
  beforeDestroy() {
     EventBus.$off("highLightResLi", this.highLightResLi);
     EventBus.$off("updateRegions", this.updateRegions);
     EventBus.$off("clearSearchResult", this.clearSearch);
     EventBus.$off("updateMicroSearchParams");
  },
  methods: {
    ...mapMutations([
      "changeshowmacroqueryall",
      "changeShowFastCollectLayer",
      "changeShowTypeTabLayer",
      "changeShowTableLayer",
      "changeShowMicroQueryResult",
      "changeShowQueryTableLayer",
      "changeShowEchartsLayer",
      "changeShowMapTableLayer",
      "changeSearchDataStatus",
      "changeEnlargeTable",
      "changeEnlargeChart",
      "changeShowMapControl",
      "changeDetailViewData"
    ]),
    //更新每一个查询条件
    updateMicroSearchParams(conditions){
      let that = this;
      if(that.microSearchParams.length > 0){
        for(let i in that.microSearchParams){
          that.microSearchParams[i].conditions = conditions;
        }
        // that.pagination.pagenum = 1;
        // this.microSearch();
        // //用全局事件总线去更新专题图查询参数
        // EventBus.$emit("updateMicroSearch", this.microSearchParams,this.selectedSearchParams);
      }
    },
    // //查询表指标(分类查询枚举指标)
    // getMicroIden(node) {
    //   let that = this;
    //   let req = {
    //     miid: node.id,
    //     iden_type: 4
    //   };
    //   microAPI
    //     .getSelectedTableIden(req)
    //     .then(res => {
    //       if (res.message == "success" && res.data.length > 0) {
    //         let arr = res.data;
    //         console.log('arr:',arr);
    //         let newArr = [];
    //         arr.map(item => {
    //           if (item.idenAliasCode != "HYDM") {
    //             item.name = item.idenName;
    //             item.data = [];
    //             item.checkList = [];
    //             newArr.push(item);
    //           } else if (item.idenAliasCode == "HYDM") {
    //             item.name = item.idenName;
    //             item.data = [];
    //             item.checkList = [];
    //             that.initTradeCode(item);
    //           }
    //         });
    //         console.log('classified_query_item:',that.classified_query_item)
    //         that.classified_query_item = newArr;

    //         for (let i in that.classified_query_item) {
    //           this.classifiedQuery(that.classified_query_item[i], i);
    //         }
    //         this.collapse.collapseActiveNames = "0";
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // },
    //更新区划
    updateRegions(tagsdata,type) {
      let that = this;
      if(type=="toolClear"){//工具栏清除
        this.clearSearch();
      }
      if(tagsdata.length>0){
        let regionsArr = [];
        for (let i = 0; i < tagsdata.length; i++) {
          let level = sgisRegionBase.regionUtils.getRegionLevel(
            tagsdata[i].regionCode || tagsdata[i].code
          );
          regionsArr.push({
            regionCode: tagsdata[i].regionCode || tagsdata[i].code, //区划代码
            regionName: tagsdata[i].name ||tagsdata[i].shortName ||"", //区划名称
            regionLevel: level //当前区划等级
          });
        }
        if (that.microSearchParams.length > 0) {
          this.selectedSearchParams.regions.regionArr = regionsArr;
          for(let i =0; i < that.microSearchParams.length;i++){
            that.microSearchParams[i].regions.regionArr = regionsArr;
          }
          that.pagination.pagenum = 1;
          this.microSearch();
          //用全局事件总线去更新专题图查询参数
          EventBus.$emit("updateMicroSearch", this.microSearchParams,this.selectedSearchParams,type);
        }
      }else{//没有区划不再查数据
        this.pagination.pagenum = 1;
        this.pagination.total = 0;
        this.searchresult.searchresultlistData = [];
        this.clearSearch();
      }
    },
    closeQueryResult() {
      if(this.microSearchParams.length==0){
        this.$emit("changeMicroSearchStatus",false);
      }
      this.$store.commit("changeShowMicroQueryResult", false);
    },
    initArgs(newargs) {
      newargs.sort = this.sort;
      newargs.title = "查询" + (this.sort + 1);
      newargs.pagenum = 1; //默认都查询第一页数据
      this.sort += 1;
      if (this.microSearchParams.length > 4) {
        this.$message({
          message: "叠加结果数超出限制，请清除结果后再查询",
          type: "error"
        });
        return;
      } else {
        this.microSearchParams.push(newargs);
        this.selectedSearchParams = newargs;
        this.pagination.pagenum = 1; //默认查询第一页
        this.microSearch();
        //用全局事件总线去更新专题图查询参数
        EventBus.$emit("updateMicroSearch", this.microSearchParams,this.selectedSearchParams);
      }
    },
    //删除查询结果项
    deleteResultParams(item,index){
      let that = this;
      if(item.sort==that.selectedSearchParams.sort){//关闭当前选中项
        that.microSearchParams.splice(index,1);
        if(that.microSearchParams.length==1){//只剩下一个结果
          that.selectedSearchParams = that.microSearchParams[0];
          that.tableCurrentChange(that.selectedSearchParams.pagenum);
        }else if(that.microSearchParams.length>1){//2个及以上结果
          that.selectedSearchParams = that.microSearchParams[0];
          that.changeSearch(that.selectedSearchParams);
          that.tableCurrentChange(that.selectedSearchParams.pagenum);
        }else{//没有查询结果，关闭结果面板
          that.clearSearch();
        }
        
      }else{
        that.microSearchParams.splice(index,1);
      }
      if(that.selectedSearchParams.hasOwnProperty("microid")){
        //用全局事件总线去更新专题图查询参数
        EventBus.$emit("updateMicroSearch", that.microSearchParams,that.selectedSearchParams);
      }else{//无数据清除结果
        that.clearSearch();
      }
    },
    //基层查询(左边表格数据)
    microSearch() {
      let that = this;
      that.searchresult.searchresultlistData = [];
      let microQuery = {
        conditions: this.selectedSearchParams.conditions,
        msConditions: this.selectedSearchParams.msConditions,
        isSpecial: "none", //直接如此传
        periods: this.selectedSearchParams.periods,
        regionType: this.selectedSearchParams.regions.regionCodeType,
        regions: this.selectedSearchParams.regions.regionArr
      };
      let args = {
        current: this.pagination.pagenum,
        size: microConfig.table.pagesize,
        microId: this.selectedSearchParams.microid, //主表id
        microQuery: microQuery
      };
      axios({
        url: microConfig.microSearch,
        method: "post",
        timeout: axiosTimeOut,
        params: {
          current: args.current,
          microId: args.microId,
          size: args.size
        },
        data: args.microQuery
      })
        .then(function(response) {
          if (response.data.message == "success") {
            let data = response.data.data;
            that.pagination.total = data.content.total;
            that.inittabledata(data);
            that.$store.commit("changeSearchDataStatus", true);
            that.$store.commit("changeShowMapTableLayer", true);
            that.$store.commit("changeShowEchartsLayer", true);
            EventBus.$emit("selectedSearchParams", that.selectedSearchParams);
          } else {
            that.$message({
              message: response.data.message,
              type: "error"
            });
            return;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //初始表格数据
    inittabledata(data) {
      let tableData = searchresultData.inittableData(data);
      this.searchresult.searchresultlistData = tableData;

      // 用全局事件总线去更新marker图
      EventBus.$emit("updateMarkChartData", data);
    },
    //查询结果表格行数据点击事件，去执行具体查询定位地图操作
    searchresultrowhander(item, index, type) {
        EventBus.$emit("highLightMarker", item.info.ID, type);
      if (type == "leave") {
        //取消高亮
        this.searchresult.activeitem = -1;
      } else {
        this.searchresult.activeitem = index;
      }
      
      if(type=="click"){
        //改变详情面板数据
        this.$store.commit("changeDetailViewData", item);
      }
    },
    //翻页
    tableCurrentChange(val) {
      let that = this;
      this.pagination.pagenum = val;
      // let index = this.selectedSearchParams.sort;
      // this.microSearchParams[index].pagenum = val;
      //  let index = this.selectedSearchParams.sort;
      this.microSearchParams.map((item)=>{
        if(item.sort == that.selectedSearchParams.sort){
          item.pagenum = val;
        }
      })
      // this.selectedSearchParams[index].pagenum = val;
      this.microSearch();
    },
    //打开快速汇总层
    openFastCollectLayer() {
      this.typetabstyle.width = "calc(100vw - 301px)";
      this.typetabstyle.left = "301px";
      this.typetabstyle.activeName = "tongjitu";
      this.$store.commit("changeShowFastCollectLayer", true);
      this.$store.commit("changeShowTypeTabLayer", true);
      this.$store.commit("changeshowmacroqueryall", false);
      this.$store.commit("changeDetailViewLayer", false);
    },
    //打开表格层
    openTableLayer() {
      this.typetabstyle.width = "100vw";
      this.typetabstyle.left = "0";
      this.typetabstyle.activeName = "table";
      this.$store.commit("changeShowTableLayer", true);
      this.$store.commit("changeShowTypeTabLayer", true);
      this.$store.commit("changeshowmacroqueryall", false);
    },
    //清除专业查询结果
    clearSearch() {
      this.microSearchParams= []; //存储基层查询参数
      this.selectedSearchParams= {}; //当前选中项查询参数
      this.searchresult.searchresultlistData = [];
      this.pagination.total = 0;
      this.pagination.pagenum = 1;
      this.sort = 0;
      // this.status.blurrysearchresult = false;
      // this.status.isFirstMicroSearch = true;
      // this.status.isClear = true;
      //用全局事件saveterm总线去清除专题图表
      //关闭面板
      this.$store.commit("changeEnlargeTable", false);
      this.$store.commit("changeEnlargeChart", false);
      this.$store.commit("changeShowMapControl", false);
      this.$store.commit("changeShowMapTableLayer", false);
      this.$store.commit("changeShowEchartsLayer", false);
      EventBus.$emit("clearMicroAllChart");
      this.closeQueryResult();
    },
    //切换查询结果
    changeSearch(item) {
      if(item.sort != this.selectedSearchParams.sort){
        this.selectedSearchParams.pagenum = this.pagination.pagenum; //及时存储结果当前页
        this.selectedSearchParams = item;
        this.pagination.pagenum = this.selectedSearchParams.pagenum; //用选中项上次保存页
        this.microSearch();
        //用全局事件总线去更新选中结果图表
        EventBus.$emit("updateMicroSearchItem",this.microSearchParams,this.selectedSearchParams);
      }
    },
    update_typetabstyle(typetabstyle) {
      this.typetabstyle = typetabstyle;
    },
    //高亮选中项
    highLightResLi(id) {
      let self = this;
      this.searchresult.searchresultlistData.map((data, index) => {
        if (data.info.ID == id) {
          self.searchresult.activeitem = index;
        }
      });
    },
    closeSaveDialog(formName){
      this.$refs[formName].resetFields();
      this.resultSave = false;
    },
    saveterm(formName){
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let args = {
            title: that.saveResultform.title,
            memo: that.saveResultform.memo,
            conditions: JSON.stringify(that.hasaddResult.conditions),
            query_api: "api_json", //查询接口
            type: 2, //1=收藏条件
            result_img: "img", //成果图片
            mitmid:that.mitmid
          };
          microAPI.addAchievement(args).then(res=>{
            if(res.message == "success"){
              that.resultSave = false;
              that.$message({
                message: "保存成功",
                type: "success"
              });
              that.$emit("update_SaveTerm");
              that.$refs[formName].resetFields();
            }else{
              that.$message({
                message: res.message,
                type: "err"
              });
            }
          })
          .catch (error=>{
            console.log(error)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.microQueryResult {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1300;
  background:#0A576E;
  // max-height: 900px;
  .header {
    text-align: center;
    font-size: $fontSizeTitle;
    background-color: $backGroundColor;
    font-weight: bold;
    height: 60px;
    line-height: 60px;
    box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.3);
    i {
      font-weight: bold;
      float: left;
      font-size: 26px;
      font-weight: bold;
      line-height: 2.3;
      margin-left: 20px;
      cursor: pointer;
      color: $fontColor;
    }
    p {
      cursor: pointer;
      text-align: left;
      color: $fontColor;
    }
  }
  .content {
    height: calc(100% - 70px);
    .btn-box {
      width: 25px;
      padding-left: 5px;
      float: left;
      button {
        padding: 1px;
        white-space: pre-wrap;
        margin-left: 0;
        width: 25px;
        background: none;
        border: 1px solid #ddd0;
        color: $fontColorLimit;
        span {
          i {
            margin: 5px;
          }
        }
      }
      button.active {
        background: $backGroundColorDeep;
      }
    }
    .searchresult-box {
      height: 80%;
      color: $fontColorLimit;
      ul {
        height: 85%;
        overflow: auto;
        background: $backGroundColorDeep;
        width: 260px;
        border-radius: 2px;
        overflow-x: hidden;
        li {
          font-size: $fontSize;
          line-height: 2;
          cursor: pointer;
          display: inline-block;
          width: 100%;
          p {
            float: left;
            padding-left: 10px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          i {
            float: left;
            margin-right: 10px;
            line-height: 2;
          }
        }
        li.active {
          background: $colorBackgroundActive;
          color: #fff;
        }
        li:hover {
          background: $colorBackgroundActive;
          color: #fff;
        }
      }
      .el-pagination {
        ul {
          li {
            background: none;
                color: #fff;
          }
        }
        button:disabled {
          background: none;
        }
      }
      .pagination-box {
        border-bottom: 1px solid;
      }
    }
    .hander-box {
      display: inline-block;
      padding-top: 10px;
      cursor: pointer;
      div {
        float: left;
        margin: 5px;
        position: relative;
        margin-right: 14px;
        img {
          width: 24px;
          height: auto;
          text-align: center;
          left: 0;
          right: 0;
          position: absolute;
          top: 0;
          bottom: auto;
          margin: auto;
        }
        p {
          font-size: $fontSize;
          margin-top: 26px;
          color: $fontColorLimit;
        }
      }
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
@import "../css/rule.scss";
  .searchresult-box {
    ul {
      margin: 10px 0;
      li {
        line-height: 2;
        cursor: pointer;
        i {
          margin-right: 5px;
        }
      }
    }
    .el-pagination {
      margin-bottom: 20px;
      ul {
        margin: 0;
        li {
          background: none;
          line-height: 1.5;
          font-size: 14px;
        }
      }
      button:disabled {
        background: none;
      }
      .btn-prev,
      .btn-next {
        background: none;
        color: $normalFontColor;
      }
    }
    .el-pagination__jump {
      margin-left: 4px;
    }
    .el-pagination__jump input {
      background: none;
      border: 1px solid $leftborderColor;
    }
  }
.left .searchresult-box .pagination-box .el-pagination{
  line-height: 2;
  white-space: inherit;
}
.left .searchresult-box .pagination-box .el-pagination .el-pagination__total{
  margin: 0 10px;
  color: $normalFontColor; 
  left: 100px;
  position: absolute;
}
.left .searchresult-box .el-pagination__jump{
  margin-left: 9px;
  margin: 0 10px;
  color: $normalFontColor; 
  width: 90%;
  .el-pagination__editor{
    color: $normalFontColor; 
    width: 50px;
    .el-input__inner{
      color: $normalFontColor; 
      border: 1px solid $borderColorW;
    }
  }
}
.left .searchresult-box  .el-pager{

}

.left .searchresult-box .pagination-box .el-pagination .el-pager li{
  padding:1px;
  min-width:12px;
  margin: 0 2px;
  color: $normalFontColor; 
}
.left .searchresult-box .pagination-box .el-pagination .el-pager li.active{
  color: $fontColorActive; 
}
.left .searchresult-box .pagination-box .el-pagination .el-pager li:last-child{
  height:22px;
}

.el-pagination__editor.el-input{
  width:40px;
}
.el-pagination--small .el-pagination__editor.el-input .el-input__inner{
  font-size:12px;
}
.dialogSaveTerm{
  background: $panelContentBg;
  .el-dialog__header{
    background: $panelTitleBg;
    padding: 0;
  }
  .el-dialog__title{
    color: $fontColorW;
    line-height: 2;
  }
  .el-dialog__headerbtn{
    width: auto;
    height: auto;
    top: 0;
  }
  .el-dialog__body{
    form{
      width: 100%;
      input{
        margin: 0;
        background: none;
        border: 1px solid $borderColorW;
        color: $fontColorLimit;
      }
      .el-form-item__label{
        color: $fontColorW;
      }
    }
  }
  .el-dialog__close{
    margin-top:8px;
    color: $fontColorLimit;
  }
  .el-dialog__close:hover{
    color: $fontColorLimit;
  }
  .el-dialog__footer{
    button{
      width: auto;
      height: auto;
    }
    .cancel {
      color: $fontColorW;
      background: none;
      border: 1px solid rgba(238,238,238,0.2);
      box-sizing: border-box;
    }
    .submit {
      border: none;
      background: #1d9cb7;
      border: 1px solid #1d9cb7;
      box-sizing: border-box;
    }
  }
}
</style>

